<!--招商提醒-->
<template>
  <a-card
      style="height: 100%; width: 100%; display: flex; flex-direction: column"
      :bodyStyle="{flex: 1, height: 0}"
  >
    <template #title>
      <a-badge :count="total" :offset="[10, -2]">
        <cu-icon class="icon-primary" type="org-zhaoshang-"/>
        招商提醒
      </a-badge>
    </template>
    <template #extra>
      <a-button
          type="link"
          size="small"
          @click="goList">更多&nbsp;&gt;
      </a-button>
    </template>
    <div ref="listBox" class="inform-box">
      <a-list :data-source="list" :loading="spinning">
        <template #renderItem="{ item, index }">
          <div
              class="list-item"
              @click="goList"
          >
            <div class="item-title textEllipsis">
              {{ item.name }}
            </div>
            <div class="tags" v-if="item.status_txt">
              {{ item.status_txt }}
            </div>
            <div style="font-size: 12px; color: rgba(0, 0, 0, 0.45)">
              {{ item.updated_at }}
            </div>
          </div>
        </template>
      </a-list>
    </div>
  </a-card>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  nextTick,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount
} from "vue";
import request from "../../../common/utils/request";
import {message} from "ant-design-vue";
import utils from '@/common/utils/utils'

export default defineComponent({
  name: "attractRemind",
  props: {},
  components: {},
  setup(props, context) {
    const state = reactive({
      list: [],
      listTimer: null,
      spinning: false,
      page: 1,
      pageSize: 10,
      total: 0,
      canNext: true,
    });
    const listBox = ref();
    const scrollTop = ref(0);

    const getData = (isNext) => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        if (isNext) {
          state.page++;
        }

        let params = {
          page: state.page,
          limit: state.pageSize,
        }
        state.canNext = false;
        request.get("/org", '/business/customer/notice', params).then((res) => {
          state.spinning = false;
          state.total = res?.total || 0;
          if (state.page > 1) {
            state.list = state.list.concat(res?.list);
          } else {
            state.list = res?.list;
          }
          state.canNext = true;
        }).catch((err) => {
          state.spinning = false;
        });
      }, 500)
    }


    const handleScroll = () => {
      listBox.value.addEventListener('scroll', () => {
        //获取dom滚动距离
        scrollTop.value = listBox.value.scrollTop;
        //获取可视区高度
        const offsetHeight = listBox.value.offsetHeight;
        //获取滚动条总高度
        const scrollHeight = listBox.value.scrollHeight;
        if (scrollTop.value + offsetHeight >= scrollHeight - 360) {
          // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
          if (state.total > state.list.length && state.canNext) {
            getData(true);
          }
        }
      })
    };


    const goList = () => {
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_customerManagement`,
            app: 'org',
            name: `意向客户`,
            url: `/village/customerList`,
          }
        })
      } else {
        utils.goMainRoute({name: 'customerManagement',})
      }
    };


    onMounted(() => {
      handleScroll();
    });
    onBeforeUnmount(() => {
      listBox.value.removeEventListener('scroll', () => {
      }); // 离开当前组件移除事件监听
    });

    getData();


    return {
      ...toRefs(state),
      listBox,
      goList,

    };
  },
});
</script>

<style lang="less" scoped>
.inform-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.list-item {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;

  &:hover {
    background-color: #f0f9ff;
  }
}

.item-title {
  width: 25%;
}

.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.icon-primary {
  color: @primary-color;
  font-size: 18px;
}

:deep(.ant-badge) {
  font-size: inherit;
}

.tags {
  max-width: 100%;
  width: fit-content;
  height: 24px;
  line-height: 24px;
  background-color: #fff1c0;
  padding: 0 10px;
  border-radius: 5px;
  color: #ff9329;
  font-size: 12px;
}
</style>
